import { useState, useEffect } from "react";
import {
  Space,
  Tag,
  Pagination,
  Table,
  Button,
  Modal,
  Form,
  Input,
  message,
  Col,
  Row,
  DatePicker
} from "antd";


const { CheckableTag } = Tag;
const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  const [teacherList, setTeacherList] = useState([]);
  const [defaultList,setDefaultList]=useState([])
  const [form] = Form.useForm();
  const temp = [
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县关sada爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县daff关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易aawwfa关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县gaaw关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县关爱sfawg退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
    {
      tid: "130000002401258000015",
      tname: "基金会变更登记(法定代.",
      xkXdrMc: "河北省易县关爱退役军人.",
      xkXdrLb: "法人及非法人组织",
      xkXdrShxym: "53130000MJ08757038",
      xkZt: "未推送",
      createTime: "2024-03-27 15:02:37",
      xkXkjg: "河北省民政厅",
    },
  ];
 
  const { TextArea } = Input;
  const showFormModal = (e,record) => {
    setIsModalOpen(true);
    console.log(e,record)
    //发送请求重置默认值
    form.setFieldsValue(record);

  };
  const showListModal = (e,record)  => {
    //请求错误信息数据
    setDefaultList( [
      {
        err_info: record.xkXdrMc,
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: record.xkXdrMc,
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: record.xkXdrMc,
        create_date: "2024-03-27 15:02:37",
      },
      
    ])
    setIsModalOpen2(true);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
    setIsModalOpen2(false);
  };
  const deleteTeacher = (e, record) => {
    console.log(record);
  };
  const handleResize = (index, width) => {
    const { columns } = this.state;
    columns[index].width = width;
    this.setState({ columns });
  };
  // const [selectedTags, setSelectedTags] = useState('');
  // const [news, setNews] = useState([]);
  // // const [total, setTotal] = useState(0);
  // // const [page, setPage] = useState(1);

  useEffect(() => {
    setTeacherList(temp);
    setDefaultList( [
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
      {
        err_info: "130000002401258000015",
        create_date: "2024-03-27 15:02:37",
      },
    ])
   
  }, []);
  const onFinish = (values) => {
    console.log(values)

  };
  const columns = [
    {
      title: "办件号",
      dataIndex: "tid",

      align: "center",
    },
    {
      title: "事项名称",
      dataIndex: "tname",

      align: "center",
    },
    {
      title: "行政相对人名称",
      dataIndex: "xkXdrMc",

      align: "center",
    },
    {
      title: "行政相对人类别",
      dataIndex: "xkXdrLb",

      align: "center",
    },
    {
      title: "统一社会信用代码",
      dataIndex: "xkXdrShxym",

      align: "center",
    },
    {
      title: "当前状态",
      dataIndex: "xkZt",

      align: "center",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",

      align: "center",
    },
    {
      title: "许可机关",
      dataIndex: "xkXkjg",

      align: "center",
    },
    {
      title: "Action",
      key: "action",
      align: "center",
      render: (_, record) => (
        <div>
          <div>
            <Button onClick={e=>{showFormModal(e,record)}} type="link">
              修改许可信息
            </Button>
          </div>
          <div>
            <Button onClick={e=>{showListModal(e,record)}} type="link">
              查看错误明细
            </Button>
          </div>
        </div>
      ),
    },
  ];
  const detailColumns = [
    {
      title: "错误信息",
      dataIndex: "err_info",
      align: "center",
    },
    {
      title: "创建时间",
      dataIndex: "create_date",
      align: "center",
    },
  ];
  const gutterCol = {
    padding: "0 8px",
    height: "60px",
  };
  const tip = {
    fontSize: "30px",
    fontWeight: "bolder",
    marginTop: "15px",
  };
  const tipdetail = {
    fontSize: "15px",
    fontWeight: "bolder",
  };
  return (
    <>
      <div>
        {/* <Button
                type="primary"
                onClick={showModal}
            >
                新增教师
            </Button> */}
      </div>
      <div style={{ fontSize: "10px" }}>
        <Table dataSource={teacherList} columns={columns} />;
      </div>
      <Modal
        title="行政许可管理"
        width="80%"
        destroyOnClose={true}
        open={isModalOpen}
        footer={null}
        style={{
          top: 0,
        }}
        onCancel={handleCancel}
      >
        <Form
         form={form}
          name="basic"
          layout="Horizontal"
          // style={{ width: 400 }}
          onFinish={onFinish}
          autoComplete="off"
          labelCol={{
            flex: "170px",
          }}
          labelAlign="left"
          labelWrap
          wrapperCol={{
            flex: 1,
          }}
          colon={false}
        >
          <Row>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="行政相对人名称:"
                name="xkXdrMc"
                rules={[
                  {
                    required: true,
                    message: "请输入行政相对人名称",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="行政相对人类别:"
                name="xkXdrLb"
                rules={[
                  {
                    required: true,
                    message: "请输入教师姓名",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="统一社会信用代码"
                name="xkXdrShxym"
                rules={[
                  {
                    required: true,
                    message: "请输入教师所属学院",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="法定代表人"
                name="xkFrdb"
                rules={[
                  {
                    required: true,
                    message: "请输入教工号",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="个人证件类型"
                name="xkXdrZjlx"
                rules={[
                  {
                    required: true,
                    message: "请输入个人证件类型",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="个人证件号码"
                name="xkXdrZjhm"
                rules={[
                  {
                    required: true,
                    message: "请输入个人证件号码",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="行政许可决定文书名称"
                name="xkXkzs"
                rules={[
                  {
                    required: true,
                    message: "请输入行政许可决定文书名称",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="行政许可决定文书号"
                name="xkWsh"
                rules={[
                  {
                    required: true,
                    message: "请输入行政许可决定文书号",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}></Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="许可类别"
                name="xkXklb"
                rules={[
                  {
                    required: true,
                    message: "请输入许可类别",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="许可证书名称"
                name="xkXkzs"
                rules={[
                  {
                    required: true,
                    message: "请输入许可证书名称",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="许可编号"
                name="xkXkbh"
                rules={[
                  {
                    required: true,
                    message: "请输入许可编号",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col
              style={{ marginBottom: "15px", padding: "0 8px", height: "60px" }}
              span={24}
            >
              <Form.Item
                label="许可内容"
                name="xkNr"
                rules={[
                  {
                    required: true,
                    message: "请输入许可内容",
                  },
                ]}
              >
                <TextArea rows={2} />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="许可决定日期"
                name="xkJdrq"
                rules={[
                  {
                    required: true,
                    message: "请选择许可决定日期",
                  },
                ]}
              >
                 <DatePicker placeholder="请选择日期"/>
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="有效期自"
                name="xkYxqz"
                rules={[
                  {
                    required: true,
                    message: "请选择有效期",
                  },
                ]}
              >
                <DatePicker placeholder="请选择有效期"/>
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="有效期至"
                name="xkYxqzi"
                rules={[
                  {
                    required: true,
                    message: "请选择有效期",
                  },
                ]}
              >
                <DatePicker placeholder="请选择有效期"/>
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="许可机关"
                name="xkXkjg"
                rules={[
                  {
                    required: true,
                    message: "请输入许可机关",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="许可机关统一社会信用代码"
                name="xkXkjgdm"
                rules={[
                  {
                    required: true,
                    message: "请输入许可机关统一社会信用代码",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col style={gutterCol} span={8}>
              <Form.Item
                label="当前状态"
                name="xkZt"
                rules={[
                  {
                    required: true,
                    message: "请输入当前状态",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>

            <Col style={gutterCol} span={24}>
              <Form.Item label="备注" name="bz">
                <TextArea rows={2} />
              </Form.Item>
            </Col>

            <div>
              <div style={tip}>提示说明:</div>
              <div style={tipdetail}>
                1、"行政相对人类别"为"法人及非法人组织"，"个体工商户"或"法人"时。"统一社会信用代码"及”法定
                代表人"为必填
              </div>
              <div style={tipdetail}>
                2、"行政相对人类别"为"自然人"时，"个人证件类型"及"个人证件号码"为必填。
              </div>
              <div style={tipdetail}>
                3、"行政许可决定文书号"以部门许可台账为准，如果没有台账编号，默认使用系统自动生成的"办件号"。
              </div>
              <div style={tipdetail}>
                4、许可决定有效期为长期有效，填写为"2099-12-31"。
              </div>
            </div>

            <Col span={24} style={gutterCol}>
              <Form.Item>
                <div
                  style={{ display: "flex", justifyContent: "space-between" }}
                >
                  <div></div>
                  <div>
                    <Button onClick={handleCancel} style={{ marginRight: "10px" }} type="default">
                      取消
                    </Button>
                    <Button type="primary" htmlType="submit">
                      确定
                    </Button>
                  </div>
                </div>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal
        title="查看明细"
        width="80%"
        height="100%"
        destroyOnClose={true}
        open={isModalOpen2}
        footer={null}
        style={{
          top: 0,
          overflow:"auto"
        }}
        onCancel={handleCancel}
      >
        <Table dataSource={defaultList} columns={detailColumns} />
      </Modal>
    </>
  );
};
export default App;
